<template>
  <div>
    <el-form  :model="form" :rules="rules" ref="form" label-width="120px" label-position="left" class="demo-ruleForm" >
         <el-form-item label="商品名称" prop="title"  >
              <el-input v-model="form.title" placeholder="请输入商品名称" ></el-input>
          </el-form-item>
          <el-form-item label="商品类型" prop="type_id" >
            <el-select v-model="form.type_id" placeholder="请选择商品类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="商品标签" prop="isNew" >
          <el-radio-group v-model="form.isNew">
            <el-radio label="false" >常规</el-radio>
            <el-radio label="true" >新品</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="店铺商品" prop="isNew" v-if="this.$store.state.utype == '1'">
          <el-select v-model="form.store_id" filterable placeholder="请选择店铺">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      <el-form-item label="上传店铺图片">
        <el-upload
          action="http://localhost:9000/upload"
          list-type="picture-card"
          :limit ="5"
          :on-preview="handlePictureCardPreview"
          :on-exceed="handleExceed"
          :on-success="uploadVoucherSuccess"
          :before-upload="beforeVoucherUpload">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

      </el-form-item>
      <el-form-item label="商品介绍内容 " prop="explains" >
              <el-input  type="textarea" :rows="4 "  placeholder="请输入商品详情介绍内容" v-model="form.explains" ></el-input>
      </el-form-item>
      <el-form-item>
          <el-button v-if="protype == 2"  type="primary" @click="Submit()" >确定修改</el-button>
          <el-button v-else type="primary" @click="Onsubmit()" >立即新增</el-button>
          <el-button @click="resetForm('form')">取消</el-button>
      </el-form-item>
      </el-form>
      
  </div>
</template>

<script>
import httpApi from '@/http';

  export default {
    // 子组件通过props接收的是值，可以在子组件的钩子函数中直接用this使用
    props: {
      protype: Number,
      rows:Object
    },
    data(){
          return{
            // 上传
            dialogImageUrl: '',
            dialogVisible: false,
            // 修改
            formData:{},
            // 选择器
            option:[],
            value:'',
            options: [{
              value: '1',
              label: '西式婚纱'
            }, {
              value: '2',
              label: '中式婚纱'
            }, {
              value: '3',
              label: '个性婚纱'
            }],
            img:[],
            // 表单内容
            form:{
              store_id:'',
              // type:this.$store.state.utype,
              shore_uid:this.$store.state.uid,
              title:'',
              type_id:'',
              isNew:'',
              explains:'',

              // img1:'',
              // img2:'',
              // img3:'',
              // img4:'',
              // img5:''
            },
              // 验证表单
              rules:{
                title:[ { required: true, message: '必填', trigger: 'blur' }],
                type_id:[ { required: true, message: '必填', trigger: 'blur' }],
                isNew:[ { required: true, message: '必填', trigger: 'blur' }],
                // img:[ { required: true, message: '必填', trigger: 'blur' }],
                explains:[ { required: true, message: '必填', trigger: 'blur' }],
              },
          }
    },
      methods: {
        // 上传
        handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        console.log(this.dialogImageUrl);
        this.dialogVisible = true;
      },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 5个图片，共选择了 ${files.length + fileList.length} 个图片`);
        },
        // 处理上传之前的格式大小验证
        beforeVoucherUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJPG) {
            this.$message.error('上传图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        // 上传成功
        uploadVoucherSuccess(res, file) {
          // 将上传成功后的图片访问路径，存入form对象
          if(res.msg === 'ok' && res.code === 200){
            this.img.push(res.data)
          }
        },
        handle(rows){
          //通过this.$emit将operation已事件的方式传递给父组件，并将index，rows作为参数传递
          this.$emit("operation", rows); 
        },

          // 提交表单
        Onsubmit(){
          this.$refs['form'].validate(valid=>{
            if (valid) {
              this.img.map( (item,intex) => {
                this.form[`img${intex+1}`] = item
              })
              if(this.form.isNew == 1){
                this.form.isNew = null
              }
              // console.log(this.form);
              this.handle(this.form)
            } else {
              this.$message({
                showClose: true,
                message: '表单填写有错误',
                type: 'error'
              });
            }
          });
        },
        Submit(){
          this.$refs['form'].validate(valid=>{
            if (valid) {
              this.img.map( (item,intex) => {
                this.form[`img${intex+1}`] = item
              })
              if(this.form.isNew == 1){
                this.form.isNew = null
              }
              // console.log(this.form);
              this.handle(this.form)
            } else {
              this.$message({
                showClose: true,
                message: '失败',
                type: 'error'
              });
            }
          });
        },

        store(){
          httpApi.storeApi.queryStore().then(res=>{
            console.log( res.data.results,'111');
            for(let i=0 ; i < res.data.results.length ; i++){
              this.option.push({ value: res.data.results[i].store_id, label:  res.data.results[i].Chinese}) 
              
            }
          })
          console.log(this.option,'1');
          
        }
         
      },
      mounted(){
        if(this.protype == 2){
          this.formData = this.rows
          this.form = this.formData
        }
        if(this.$store.state.utype == '1'){
            this.store()
        }
       
      }
  }
</script>

<style lang="scss" scoped>

</style>